<template>
    <view
      class="content"
      :style="{
        'padding-top': height + 'px',
      }"
    >
      <view
        :style="{
          height: statusBarHeight + 'px',
        }"
      >
      </view>
      <!-- 头部 -->
      <view
        class="head"
        :style="{
          top: statusBarHeight + 'px',
        }"
      >
        <view class="head_left">
          <u-icon
            name="arrow-left"
            color="#FFFFFF"
            size="24"
            :bold="true"
            @click="toBack"
          ></u-icon>
        </view>
        <view class="text">预览</view>
      </view>
      <!-- 主体 -->
      <view class="box box1">
        <image
            :src="img"
            mode="widthFix"
            v-if="type == 'true'"
            class="box_img"
        ></image>
        <video id="myVideo" :src="vimg" :autoplay=true :show-fullscreen-btn=false  class="video_view" v-else></video>
        <!-- :show-fullscreen-btn=false -->
      </view>
	  <floatingBall></floatingBall>
    </view>
  </template>
    
    <script>

  export default {
    components: {
    },
    props:{
        // img:{
        //   type:String,
        //   default:'https://cdn.uviewui.com/uview/album/1.jpg'
        // },
        // vimg:{
        //   type:String,
        //   default:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4'
        // },
    },
    
    data() {
      return {
        statusBarHeight: 0,
        height: 0,
        type:'',// true图片  false视频
        img:'',
        vimg:'',
      };
    },
    onLoad(options){
        this.$set(this,'type',options.type)
        this.img = options.img
        this.vimg = options.vimg
    },
    created() {
      const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
      this.statusBarHeight = statusBarHeight.statusBarHeight;
      this.$nextTick(() => {
        uni
          .createSelectorQuery()
          .select(".head")
          .boundingClientRect((data) => {
            this.height = data.height;
          })
          .exec();
      });
    },
    methods: {
      toBack() {
        uni.navigateBack({
          delta: 1,
        });
      },
    },
  };
  </script>
    
    <style scoped lang="scss">
  .content {
    box-sizing: border-box;
    width: 100vw;
    height: 100%vh;
    background: #000000;
    display: flex;
    flex-direction: column;
  }
  .head {
    width: 100%;
    padding: 18rpx 30rpx 47rpx;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    z-index: 99;
    
    .head_left {
      position: absolute;
      left: 30rpx;
    }
  
    .head_right {
      position: absolute;
      right: 30rpx;
      color: #55b877;
      font-size: 30rpx;
    }
  
    .text {
      font-size: 36rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: 400;
      color: #111111;
      // color: white;
    }
  }
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex:1;
    overflow: hidden;
    image{
        width: 100%;
    }
    .video_view{
        // position: fixed;
        // top: 0;
        // left: 0;
        width: 100%;
        height: 100%;
        
    }
    /deep/ .uni-video-cover-duration{
      display: none;
    }
  }
  
  
  </style>